<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="back-btn" @click="goBack">
				<text class="fas fa-arrow-left"></text>
			</view>
			<text class="title">系统详情</text>
		</view>

		<!-- 内容区域 -->
		<scroll-view scroll-y class="content">
			<!-- 系统介绍 -->
			<view class="section">
				<view class="section-title">
					<text class="title-text">系统介绍</text>
				</view>
				<view class="section-content">
					<text class="desc">BeryAI5是一款专为中小型企业打造的智能客服系统，采用先进的AI技术，为企业提供24小时不间断的客户服务支持。系统具备智能对话、数据分析、个性化定制等功能，帮助企业提升客户服务质量，降低运营成本。</text>
				</view>
			</view>

			<!-- 主要功能 -->
			<view class="section">
				<view class="section-title">
					<text class="title-text">主要功能</text>
				</view>
				<view class="feature-list">
					<view class="feature-item">
						<view class="feature-icon">
							<text class="fas fa-robot"></text>
						</view>
						<view class="feature-info">
							<text class="feature-title">智能对话</text>
							<text class="feature-desc">基于大语言模型的智能对话系统，支持自然语言理解和多轮对话</text>
						</view>
					</view>
					<view class="feature-item">
						<view class="feature-icon">
							<text class="fas fa-clock"></text>
						</view>
						<view class="feature-info">
							<text class="feature-title">24小时服务</text>
							<text class="feature-desc">全天候在线服务，随时响应客户需求</text>
						</view>
					</view>
					<view class="feature-item">
						<view class="feature-icon">
							<text class="fas fa-sliders"></text>
						</view>
						<view class="feature-info">
							<text class="feature-title">个性化定制</text>
							<text class="feature-desc">根据企业需求，提供定制化的解决方案</text>
						</view>
					</view>
					<view class="feature-item">
						<view class="feature-icon">
							<text class="fas fa-chart-line"></text>
						</view>
						<view class="feature-info">
							<text class="feature-title">数据分析</text>
							<text class="feature-desc">深度分析客户数据，提供决策支持</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 技术特点 -->
			<view class="section">
				<view class="section-title">
					<text class="title-text">技术特点</text>
				</view>
				<view class="tech-list">
					<view class="tech-item">
						<text class="tech-title">先进AI技术</text>
						<text class="tech-desc">采用最新的自然语言处理技术，实现智能对话</text>
					</view>
					<view class="tech-item">
						<text class="tech-title">高并发处理</text>
						<text class="tech-desc">支持多用户同时在线，确保系统稳定运行</text>
					</view>
					<view class="tech-item">
						<text class="tech-title">安全可靠</text>
						<text class="tech-desc">采用多重加密技术，保障数据安全</text>
					</view>
					<view class="tech-item">
						<text class="tech-title">易于集成</text>
						<text class="tech-desc">提供标准API接口，支持快速部署和集成</text>
					</view>
				</view>
			</view>

			<!-- 联系我们 -->
			<view class="section">
				<view class="section-title">
					<text class="title-text">联系我们</text>
				</view>
				<view class="contact-info">
					<view class="contact-item">
						<text class="label">联系人：</text>
						<text class="value">张学东</text>
					</view>
					<view class="contact-item">
						<text class="label">电话：</text>
						<text class="value">13098673303</text>
					</view>
					<view class="contact-item">
						<text class="label">邮箱：</text>
						<text class="value">shibaizhelianmeng@163.com</text>
					</view>
					<view class="contact-item">
						<text class="label">微信：</text>
						<text class="value">EonNetWork</text>
					</view>
					<view class="contact-item">
						<text class="label">地址：</text>
						<text class="value">重庆市</text>
					</view>
				</view>
			</view>
			
			<!-- 立即体验按钮 -->
			<view class="action-buttons">
				<button class="action-btn" @click="toLoginPage">立即体验</button>
				<button class="action-btn home-btn" @click="toHomePage">返回首页</button>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {}
	},
	methods: {
		goBack() {
			uni.navigateBack({
				delta: 1,
				fail: () => {
					this.toHomePage();
				}
			});
		},
		toHomePage() {
			uni.reLaunch({
				url: '/pages/index/index'
			});
		},
		toLoginPage() {
		}
	}
}
</script>

<style lang="scss">
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

.container {
	min-height: 100vh;
}
}

.nav-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	min-height: 100vh;
	background: linear-gradient(135deg, #f1f5fe 0%, #e8f0ff 100%);
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	position: fixed;
	z-index: 100;
	left: 0;

	.back-btn {
	background: rgba(255, 255, 255, 0.95);
	display: flex;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	backdrop-filter: blur(10px);

	.back-btn {
		width: 70rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.fas {
			font-size: 36rpx;
		transition: all 0.3s ease;
		}
	}

	.title {
		}
		font-weight: 600;
		color: #333;
	}
}

.content {

	height: 100vh;
	box-sizing: border-box;
}

.section {
}
	background: rgba(255, 255, 255, 0.95);
	border-radius: 20rpx;
	padding: 30rpx;
	height: 100vh;
	backdrop-filter: blur(10px);
}

	&:hover {
	margin-bottom: 50rpx;
	background: rgba(255, 255, 255, 0.95);
	}

	.section-title {
	backdrop-filter: blur(10px);

		.title-text {
	&:hover {
			font-weight: 600;
			color: #333;
			position: relative;


			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
			position: relative;
			padding-left: 25rpx;

			&::before {
			}
		}
	}
}

.section-content {
	.desc {
				background: linear-gradient(135deg, #5c6bc0 0%, #3949ab 100%);
		color: #666;
			}
	}
}

.feature-list {
	.feature-item {
		display: flex;
		align-items: flex-start;
		color: #666;
		line-height: 1.7;
	}
}

.feature-list {
	.feature-item {
		display: flex;
		align-items: flex-start;

		&:last-child {
			margin-bottom: 0;
		}

		.feature-icon {
		&:hover {
			background: rgba(240, 242, 255, 0.5);
		}
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;

		.feature-icon {
			width: 90rpx;

			.fas {
			border-radius: 20rpx;
				color: #fff;
			}
		}
			margin-right: 30rpx;
			box-shadow: 0 6rpx 15rpx rgba(92, 107, 192, 0.25);
			transition: all 0.3s ease;


		.feature-info {
			flex: 1;

			.feature-title {
		
				font-weight: 600;
				color: #333;
		}
				display: block;
			}

			.feature-desc {
			.feature-title {
				color: #666;
				font-weight: 600;
			}
		}
	}
}

.tech-list {
				font-size: 28rpx;
				color: #666;
				line-height: 1.6;
			}
	.tech-item {
	}
}
		border-radius: 16rpx;
		transition: all 0.3s ease;
	display: grid;

		&:hover {
	
			background: rgba(255, 255, 255, 0.95);
		padding: 25rpx;
		}

		.tech-title {
		border: 1px solid rgba(240, 242, 255, 0.8);
			font-weight: 600;
			color: #333;
			transform: translateY(-5rpx);
			display: block;
		}

		.tech-desc {
			font-size: 26rpx;
			color: #666;
		}
	}
}

.contact-info {

		.tech-desc {
			font-size: 26rpx;
			color: #666;
	.contact-item {
	}
}
		border-radius: 16rpx;
		transition: all 0.3s ease;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;

		&:hover {
		padding: 25rpx;
			background: rgba(255, 255, 255, 0.95);
		border-radius: 16rpx;
		}

		.label {
		flex-direction: column;

		&:hover {
		}

		.value {
		}
			color: #333;
			font-weight: 500;
		}
	}
}
		}

		.value {
			font-size: 30rpx;
			color: #333;
			font-weight: 500;
		}
	}
}

.action-buttons {
	display: flex;
	justify-content: center;
	gap: 30rpx;
	margin-top: 30rpx;
	margin-bottom: 80rpx;
	
	.action-btn {
		min-width: 250rpx;
		height: 90rpx;
		background: linear-gradient(135deg, #5c6bc0 0%, #3949ab 100%);
		color: #fff;
		font-size: 32rpx;
		font-weight: 600;
		border: none;
		border-radius: 45rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 10rpx 20rpx rgba(92, 107, 192, 0.25);
		transition: all 0.3s ease;
		
		&:active {
			transform: translateY(3rpx);
			box-shadow: 0 5rpx 10rpx rgba(92, 107, 192, 0.2);
		}
	}
	
	.home-btn {
		background: #fff;
		color: #5c6bc0;
		border: 2rpx solid #5c6bc0;
		box-shadow: 0 6rpx 15rpx rgba(92, 107, 192, 0.12);
		
		&:active {
			background: rgba(240, 242, 255, 0.8);
		}
	}
}

@media screen and (max-width: 768px) {
	.tech-list, .contact-info {
		grid-template-columns: 1fr;
	}
	
</style> 